<template>
    <div>
        <div id="container"></div>
        <!-- <div class="input-card">
	      <h4>轨迹回放控制</h4>
	      <div class="input-item">
	        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
	        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
	      </div>
	      <div class="input-item">
	        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
	        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
	      </div>
	    </div> -->
    </div>
</template>
 
<script>
//请求路径
//import {
//playbacklist,
//} from "@/api/obd/playback";
import api from '@/api/api';
import { ElButton, ElNotification } from 'element-plus';
export default {
    name: "back-time-map",
    props: {
        clientId: {
            type: String,
            default: ''
        },
        time: {
            type: Array,
            default: []
        }
    },
    watch: {
        time() {
            this.getBackPath();
            
            //
        }
    },
    mounted() {
        this.getBackPath();
      //  this.startAnimation();
    },
    beforeDestroy() {
        this.map && this.map.destroy();
    },
    data() {
        return {
            map: null,
            marker: null,
            lineArr: []
        };
    },
    methods: {
        initMap(lng, lat) {
            this.map = new AMap.Map("container", {
                resizeEnable: true,
                center: [lng, lat],
                mapStyle: "amap://styles/dark", // 设置颜色底层
                zoom: 17,
                zooms: [3, 20],
            });

            this.marker = new AMap.Marker({
                map: this.map,
                position: [lng, lat],
                icon: "https://webapi.amap.com/images/car.png",
                offset: new AMap.Pixel(-26, -15),
                autoRotation: true,
                angle: -90
            });

            // 绘制轨迹
            let polyline = new AMap.Polyline({
                map: this.map,
                path: this.lineArr,
                showDir: true,
                strokeColor: "#28F", //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6 //线宽
                // strokeStyle: "solid"  //线样式
            });

            let passedPolyline = new AMap.Polyline({
                map: this.map,
                // path: this.lineArr,
                strokeColor: "#AF5", //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6 //线宽
                // strokeStyle: "solid"  //线样式
            });

            this.marker.on("moving", function (e) {
                passedPolyline.setPath(e.passedPath);
            });

            this.map.setFitView();
        },
        startAnimation() {
            this.marker.moveAlong(this.lineArr, 20);
        },
        pauseAnimation() {
            this.marker.pauseMove();
        },
        resumeAnimation() {
            this.marker.resumeMove();
        },
        stopAnimation() {
            this.marker.stopMove();
        },
        getBackPath() {
            var startdatetime = this.time[0].split(" ")
            var enddatetime = this.time[1].split(" ")
            var date = startdatetime[0]
            var startTime = startdatetime[1].replaceAll(":", "")
            var endTime = enddatetime[1].replaceAll(":", "")
            api.selectBackPath(this.clientId, date, startTime, endTime).then(res => {
                if(res.code==0&&res.data.length!=0){
                for (var i = 0; i < res.data.length; i++) {
                    var data = res.data[i].split(",");
                    var lng = data[2]
                    var lat = data[3]
                    var arr = [lng, lat]
                    this.lineArr[i] = arr
                }
                var datasplit= res.data[0].split(",");
                 var lng=datasplit[2]
                 var lat=datasplit[3]
                this.initMap(lng, lat)
                this.startAnimation()
            }else{
                ElNotification({ title: 'Error', message: '暂无历史定位或请求失败', type: 'error', })
            }
            }).catch(err => {
                console.log(err)
            })
        }
    }
};
</script>
 
<style lang="less" scoped>
// @import url('https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css');

#container {
    height: 64vh;
    width: 98%;
    margin-left: 10px;
    margin-top: 10px;
}

.input-card .btn {
    margin-right: 1.2rem;
    width: 9rem;
}

.input-card .btn:last-child {
    margin-right: 0;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: transparent;
    background-image: none;
    color: #25A5F7;
    border-color: #25A5F7;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: 1rem;
    //-webkit-appearance: button;
    cursor: pointer;
}

.input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
}

.input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
}
:deep(.amap-logo ){
  z-index:-1;
}
</style>